<template>
  <div v-title="'员工账号 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="MkStaffNumber">
      <div class="PublicListStyle">
        <div class="not-focus-search" v-show="beforeGetFocus">
          <div class='searchDiv marginBottom-20'>
            <i class='el-icon-search searchBtn'></i>
            <el-input  placeholder="工号/姓名/手机号" class='searchInput' @focus='onFousEvent'></el-input>
            <mk-permission :perms="['Ticket:SystemManagement:UserAccount:create']">
              <el-button type="primary" size="" class='floatRight btn-create' @click="dialogVisible_add = true">新增员工</el-button>
            </mk-permission>
          </div>
        </div>
        <div class="onfousInput marginBottom-20" v-show="!beforeGetFocus">
          <div class='onfocusInputContent'>
            <i class='el-icon-search searchBtn1'></i>
            <el-input placeholder="工号/姓名/手机号"  @keyup.native.enter='changeSearchCondition' class='searchInput1' v-model='searchCondition.search' ref='searchInput1'></el-input>
            <i class='el-icon-close closeSearch'  @click='closeSearch("searchForm")'></i>
            <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition("searchForm")'>条件重置</el-button>
            <el-button type='primary' class='btn-primary searchCustomer' @click='changeSearchCondition'>搜索</el-button>
            <!--<div class='lineStyle'></div>-->
          </div>
        </div>
        <div class="primary_bg trHasCursor tabContainer"  v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            :data="treatedOrderData.elements"
            style="width: 100%"
            @row-click='showDetail'>
            <el-table-column
              prop="number"
              label="工号"
              width="">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="phone"
              label="手机号">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="role"
              label="系统权限">
              <template slot-scope="scope">{{scope.row.role.name}}</template>
            </el-table-column>
            <el-table-column
              width='150px'
              prop="status">
              <template slot-scope="scope">
                <mk-permission :perms="['Ticket:SystemManagement:UserAccount:update']">
                <el-popover placement="top" title="" trigger="hover" popper-class='MkPopover_tip defined_tip'>
                <span>{{scope.row.statusAble?'禁用':'开启'}}</span>
                <span slot="reference">
                 <el-switch v-model='scope.row.statusAble' inactive-color="#bebebe"
                            @click.stop.native @change='isDisabled(scope.row)'>
                    </el-switch>
                </span>
                </el-popover>
                <span v-if="scope.row.statusAble" style="color:#ffa20a;float:right;padding-top:2px;padding-right:35px;">启用中</span>
                <span v-else style="float:right;padding-top:2px;padding-right:35px;">已禁用</span>
                </mk-permission>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-if='treatedOrderData.elements.length>0'
                         @current-change="handleCurrentChange"
                         :current-page="treatedOrderData.page"
                         :page-size="treatedOrderData.size"
                         layout="total, prev, pager, next"
                         :total="treatedOrderData.totalAmount">
          </el-pagination>
        </div>
        <!--员工详情-->
        <MkStaffDetail :showDialog="dialogVisible_detail" :currentStaffId="currentStaffId" @closeDialog="closeDialog_detail"></MkStaffDetail>
        <!--新增员工-->
        <MkAddStaff :showDialog="dialogVisible_add" @closeDialog="closeDialog_add"></MkAddStaff>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>
<script>
  import settingService from './../../../services/setting'
import MkBreadcrumb from './../../../components/MkBreadcrumb.vue'
  import MkAddStaff from './MkAddStaffNumber.vue'
  import MkStaffDetail from './MkStaffNumberDetails.vue'
  import { mapState } from 'vuex'
    import MkPermission from "../../../components/MkPermission";
  export default {
    name: 'MkStaffNumber',
    components:{
      MkAddStaff,MkStaffDetail, MkBreadcrumb,MkPermission
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    watch: {},
    methods: {
      onFousEvent() {
        this.beforeGetFocus=false;
        this.$nextTick(function(){
          this.$refs.searchInput1.$el.children[0].focus();
        });
      },
      loader() {
        this.loadingTab = true;
        settingService.StaffList(this.searchCondition, (data) => {
          data.data.totalAmount = parseInt(data.data.totalAmount);
          this.treatedOrderData = data.data;
//          console.log(this.treatedOrderData);
          let currentStaff=this.treatedOrderData.elements;
          for (let i=0;i<currentStaff.length;i++){
          	if(currentStaff[i].status=='ENABLE'){
              currentStaff[i].statusAble=true
            }else {
              currentStaff[i].statusAble=false
            }
          }
//          console.log(this.treatedOrderData.elements);
          this.loadingTab = false;
        })
      },
      showDetail (row, event, column) {
        this.dialogVisible_detail=true;
        this.currentStaffId=row.id;
      },
      closeSearch() {
        this.beforeGetFocus=true;
        this.resetCondition();
      },
      resetCondition(){
        this.searchCondition['page.pn']='1';
        this.searchCondition.search='';
        this.loader();
      },
      handleCurrentChange(val) {//全部
        this.searchCondition['page.pn'] = val;
        this.loader();
      },
      changeSearchCondition() {
        this.searchCondition['page.pn'] = 1;
        this.loader();
      },
      closeDialog_detail(type){
        this.dialogVisible_detail=false;
        if(type == 'yes') {
          this.loader()
        }

      },
      closeDialog_add(type){
        this.dialogVisible_add=false;
        if(type == 'yes') {
          this.loader()
        }
      },
      isDisabled(row){
        if(row.statusAble){//启用
          this.$confirm('您是否确认启用该员工?', '启用', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            customClass: 'confirmBox_warning'
          }).then(() => {
            this.enableOrDisable(row);
          }).catch(() => {
            row.statusAble=false;
          });
        }
        else{//禁用
          this.$confirm('您是否确认禁用该员工?', '禁用', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            closeOnPressEscape:false,
            customClass: 'confirmBox_warning'
          }).then(() => {
            this.enableOrDisable(row);
          }).catch(() => {
            row.statusAble=true;
          });
        }
      },
      enableOrDisable(row) {
        this.searchAble.id=row.id;
      	if(row.status=='ENABLE'){
          this.searchAble.status='DISABLE';
        }
      	else {
          this.searchAble.status='ENABLE';
        }
        settingService.StaffAble(this.searchAble,
          (data)=>{
            if(row.status=='DISABLE'){
              this.$message({
                type: 'success',
                message:　"启用成功"
              });
            }else{
              this.$message({
                type: 'success',
                message:　"该员工已禁用"
              })
            }
            this.loader();
          },
          data=>{
            row.status=!row.status;
          });
      },
    },
    mounted: function () {
      this.loader();
    },
    data () {
      return {
        loadingTab: false,
        beforeGetFocus: true,
        dialogVisible_detail:false,
        dialogVisible_add:false,
        breadcrumbData:{
          list: {
            first: {name:'系统设置',path: null, isClickAble: false},
            second: {name: '员工账号',path: null, isClickAble: false},
          },
          menuIconStyle : 'settingIconStyle'
        },
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search:'',
        },
        treatedOrderData: {
          elements: [
          ],
          page: '',
          size: '',
          totalPages: '',
          totalAmount: ''
        },
        titles:'',
//        currentStaff:'',
        currentStaffId:'',
        searchAble:{
        	id:'',
          status:''
        }
      }
    },
  }
</script>
<style lang='less'>
</style>
